<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>校历</title>
		<script src="rtian_date.js"></script>
		<style>
			:root {
				--h: 26px;
			}

			.demo {
				width: 500px;
				border: 10px solid transparent;
				background-color: rgba(255, 200, 250, 0.1);
				border-radius: 20px;
				position: relative;
				box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5) inset;
				padding: 10px;
				font-size: 10pt;
			}

			.mark {
				width: 500px;
				height: 30px;
				border-radius: 4px;
				position: absolute;
				top: calc(5px + 420px);
				pointer-events: none;
			}

			.act {
				/* border: 1px solid #f00; */
				/* background-color: rgba(0,0,0,0.1); */
				box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
			}

			.act::before {
				content: '';
				display: block;
				background-color: rgba(0, 0, 0, 0.1);
				width: 500px;
				height: 1000px;
				position: absolute;
				top: -1000px;
			}

			.act::after {
				content: '';
				display: block;
				background-color: rgba(0, 0, 0, 0.1);
				width: 500px;
				height: 1000px;
				position: absolute;
				top: 30px;
			}

			.aside {
				width: 36px;
				height: auto;
				padding: 5px;
			}

			.wkbox {
				width: 42px;
				height: var(--h);
				margin: 2px;
				float: left;
				text-align: center;
				line-height: var(--h);
			}

			.wks {
				box-shadow: 3px 0px 3px 0px rgba(100, 100, 100, 0.3) inset;
				border-radius: 15px 0 0 15px;
			}

			.cal {
				/* border: 1px solid #369; */
				border-radius: 10px;
				width: 350px;
				height: auto;
				padding: 5px;
				color: #333;
			}

			.box {
				width: 46px;
				height: var(--h);
				border-radius: 2px;
				background-color: rgba(200, 200, 200, 0.2);
				margin: 2px;
				float: left;
				text-align: center;
				line-height: var(--h);
				overflow: hidden;
				position: relative;
				box-shadow: 0px 0px 1px 0px rgba(100, 100, 100, 0.3) inset;
			}

			.box:hover {
				background-color: rgba(255, 200, 100, 0.5);
				color: #f63;
				font-weight: bold;
			}

			.cal-title {
				width: 500px;
				height: 20px;
				line-height: 25px;
				/* margin: 0 auto; */
				/* padding: 0 5px; */
				/* box-shadow: 0px 0px 1px 0px rgba(100,100,100,0.8) ; */
			}

			.tit {
				width: 50px;
				float: left;
				text-align: center;
				font-weight: bold;
				box-sizing: border-box;
			}

			.tit:not(:first-child) {
				border-left: 1px dotted #ccc;
			}

			.tit.wkbz {
				width: 96px;
			}

			.month_odd {
				background-color: rgba(255, 200, 255, 0.2);
			}

			.month_even {
				background-color: rgba(200, 200, 255, 0.2);
			}

			.tit.wk {
				color: #f00;
			}

			.holiday::before {
				content: '休';
				position: absolute;
				font: normal 10px '';
				right: 0px;
				top: 0px;
				width: 12px;
				height: 12px;
				display: block;
				line-height: 12px;
				text-align: center;
				color: #fff;
				background-color: rgba(255, 100, 50, 0.8);
				border-radius: 2px;
			}

			.workday::before {
				content: '班';
				position: absolute;
				font: normal 10px '宋体';
				right: 0px;
				top: 0px;
				width: 12px;
				height: 12px;
				display: block;
				line-height: 12px;
				text-align: center;
				color: #fff;
				background-color: rgba(50, 200, 150, 0.8);
				border-radius: 2px;
			}

			.disc {
				width: 84px;
				height: 100px;
				padding: 5px;
			}

			.discbox {
				width: 100%;
				height: var(--h);
				margin: 2px;
				float: left;
				box-sizing: border-box;
				border-bottom: 1px dotted #aaa;
				line-height: var(--h);
				color: #999;
			}

			.otherday {
				color: #ddd;
			}

			.month_day {
				color: #333;
				font-weight: bold;
			}

			.frame {
				width: 500px;
				padding: 0 1px;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				overflow: hidden;
			}

			.start_end {
				background: rgba(50, 150, 250, 0.2);
			}

			.today {
				background: rgba(200, 50, 100, 0.5);
				color: #fff;
				font-weight: bold;
			}

			.toweek {
				box-shadow: 5px 0px 3px 0px rgba(200, 50, 100, 0.5) inset;
				position: relative;
			}

			.toweek::before {
				content: '';
				display: block;
				width: 498px;
				height: 30px;
				border: 2px dotted rgba(255, 0, 0, 0.3);
				border-radius: 5px;
				position: absolute;
				top: -4px;
				left: -8px;
				background: rgba(255, 255, 255, 0.5);
				z-index: -10;
			}

			.title {
				text-align: center;
				font: bold 16pt 黑体;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid #aaa;
				/* background-color: #369; */
			}

			.hday1 {
				font: bold 10px '';
				display: block;
				/* height: 30px; */
				line-height: 13px;
			}

			.hday2 {
				font: normal 10px '';
				color: rgba(50, 100, 250, 0.8);
				display: block;
				/* height: 30px; */
				line-height: 12px;
			}

			.work1::before {
				content: '一';
			}

			.work2::before {
				content: '二';
			}

			.work3::before {
				content: '三';
			}

			.work4::before {
				content: '四';
			}

			.work5::before {
				content: '五';
			}
		</style>
		<script src="dom-to-image.min.js"></script>
	</head>
	<body>
		<button onclick="toImage()">导出图片</button>
		<div class="demo">
			<div class="title"></div>
			<div class="cal-title">
				<div class="tit wktit">教学周</div>
				<div class="tit">一</div>
				<div class="tit">二</div>
				<div class="tit">三</div>
				<div class="tit">四</div>
				<div class="tit">五</div>
				<div class="tit wk">六</div>
				<div class="tit wk">日</div>
				<div class="tit wkbz">备注</div>
			</div>
			<div class="frame">
				<div class="aside"></div>
				<div class="cal"></div>
				<div class="disc"></div>
				<div class="mark "></div>
			</div>
		</div>
		<script>
			// 20230526以实现功能为主，未进行优化。
			'use strict';
			// =======================定义校历日期=======================
			//学期开学时间
			const cal_start = '2023-2-18';
			//正式上课：教学周开始
			const class_start = '2023-2-20';
			//学期考试：教学周结束
			const class_end = '2023-6-30';
			//学期放假时间
			const cal_end = '2023-7-10';
			//节假日
			const holiday = ['2023-4-5', '2023-5-1', '2023-5-2', '2023-5-3', '2023-6-22', '2023-6-23', '2023-6-24'];
			//调休
			const workday = ['2023-4-29', '2023-4-30', '2023-6-25'];
			// ==========================================================
			let title = '郑州财经学院';
			
			//今日
			const today = new Date();
			var showToday = false;
			var showHoliday = true;
			try { // 
				let cal = {
					xq_start: new Date(cal_start),
					xq_end: new Date(cal_end),
					class_start: new Date(class_start),
					class_end: new Date(class_end),
					start: '',
				};
				
				switch (true) {/**/
					case cal.class_start < cal.xq_start:
						throw Error('上课日期应大于开学日期！');
					case cal.class_end > cal.xq_end:
						throw Error('考试日期应小于放假日期！');
					case cal.xq_end < cal.xq_start:
						throw Error('放假日期应大于开学日期！');
				}
				
				cal.start = cal.xq_start.getMonday();
				//教学周开始周
				let wk_start = cal.class_start.getWeeksFromDate(cal.xq_start);
				//教学周结束周
				let wk_end = cal.class_end.getWeeksFromDate(cal.xq_start);
				let wkindex = 0;
				//今日所在周
				let toweek = today.getWeeksFromDate(cal.xq_start);
				//学期总周数
				let wk_total = cal.xq_end.getWeeksFromDate(cal.xq_start) + 1;
				//校历开始日期
				let ds = cal.xq_start.getMonday();
				//获取学年学期信息
				let [yyyy, MM] = cal.xq_start.str().split('-').map(n => n * 1);
				if (MM < 7) {
					title += (yyyy - 1) + '-' + yyyy + '第二学期校历';
				} else {
					title += yyyy + '-' + (yyyy + 1) + '第一学期校历';
				}
				let title_div = document.querySelector('.title');
				title_div.innerHTML = title;
				let cal_div = document.querySelector('.cal');
				let wk_div = document.querySelector('.aside');
				let wk_bz = document.querySelector('.disc');
				//设置当前日期的所在周的周一日期
				for (let i = 0; i < wk_total; i++) {
					let wkdiv = document.createElement('div');
					wkdiv.className = 'wkbox';
					if (i >= wk_start && i <= wk_end) {
						wkdiv.innerHTML = ++wkindex;
						wkdiv.classList.add('wks');
					}
					if (i == toweek && showToday) {
						wkdiv.classList.add('toweek');
					}
					wk_div.appendChild(wkdiv);
					let wkbz = document.createElement('div');
					wkbz.className = 'discbox';
					if (i == 0) {
						wkbz.innerHTML = '开学';
					}
					if (i == wk_start) {
						wkbz.innerHTML = '正式上课';
					}
					if (i == wk_end) {
						wkbz.innerHTML = '考试';
					}
					if (i == wk_total - 1) {
						wkbz.innerHTML = '放假';
					}
					wk_bz.appendChild(wkbz);
					for (let j = 0; j < 7; j++) {
						let dstr = ds.str();
						let m = dstr.split('-')[1];
						let d = dstr.split('-')[2];
						let div = document.createElement('div');
						div.setAttribute('data-date', dstr);
						div.setAttribute('data-week', wkindex);
						div.setAttribute('title', dstr);
						div.className = 'box day';
						if (j > 4) div.classList.add('weekend');
						if (holiday.includes(dstr)) {
							div.classList.add('holiday');
						}
						if (workday.includes(dstr)) {
							div.classList.add('workday');
						}
						if (i == 0 && j == 0) {
							d = m + '月';
							div.classList.add('month_day');
						}
						if (d == 1) {
							d = m + '月';
							div.classList.add('month_day');
						}
						div.innerHTML += d;
						if (m % 2) {
							div.classList.add('month_odd');
						} else {
							div.classList.add('month_even');
						}
						if (ds < cal.xq_start || ds > cal.xq_end) {
							div.classList.add('otherday');
						}
						if (cal.xq_start.str() == dstr || cal.xq_end.str() == dstr) {
							div.classList.add('start_end');
						}
						if (today.str() == dstr && showToday) {
							div.classList.add('today');
						}
						if (dstr in holidayName && showHoliday) {
							div.innerHTML = '<span class="hday1">' + d + '</span><span class="hday2">' + holidayName[dstr] + '</span>';
						}
						cal_div.appendChild(div);
						ds = ds.addDays(1);
					}
				}
			} catch (err) {
				console.error(err);
			}
			
			function toImage(){
					var dom=document.querySelector('.demo');
					let style=document.createElement('style');
					dom.append(style);
					domtoimage.toJpeg(dom,{scale:5,bgcolor:'#fff'}).then(url=>{
							let link = document.createElement('a');
									link.download = title;
									link.href = url;
									link.click();
					});
			}
		</script>
	</body>
</html>